<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>XHTML5 Template</title>
  <meta charset="UTF-8" />
  <style>
/*<![CDATA[*/
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";		

body { 
  color: cadetblue; 
  background: cornsilk; 
  height: 90%; 
  font-family: helvetica, arial, sans-serif; 
} 

svg|svg { 
  position: absolute; top: 30%; left: 20%; 
  background: lightblue; 
  z-index: -1; 
  width: 200px; height: 200px; 
}
img:hover {
  width: 200px;
  -webkit-transition: width .5s;
  -moz-transition: width .5s;
}
/*]]>*/
</style>

<script>
  //<![CDATA[
   ...
  //]]>
</script>
 </head>

 <body>
  <header>
   <hgroup>
    <h1>Document Title</h1>
    <h2>Document Subtitle</h2>
   </hgroup>
  </header>
  <section><h1>Section 1 Heading</h1>
  <p><img src="../img/Smiley_green_alien.svg" width="100" /></p>
  </section>
  <section><h1>Section 2 Heading</h1>
   <figure>
    <figcaption>Figure 1: A blue circle in embedded SVG</figcaption>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
      <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
      <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
      </circle>
    </svg>
   
   <figure>
  </section>
 </body>
</html>